বুটস্ট্রাপ টিউটোরিয়াল: আমাদের এই বুটস্ট্রাপ টিউটোরিয়ালটিতে খুব সহজভাবে বুটস্ট্রাপ এর সমস্ত কম্পোনেন্ট আলোচনা করা হয়েছে। যেন আপনিও খুব সহজেই বুঝতে পারেন।

রেসপন্সিভ এবং মোবাইল-ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে টুইটার বুটস্ট্রাপ হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক।

এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!

বুটস্ট্রাপ শেখা শুরু করুন!

আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।

আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।\

kt_satt_skill_example_id=759

বুটস্ট্রাপ কি?

• দ্রুত এবং সহজতর ওয়েব ডেভেলপমেন্টের জন্য বুটস্ট্রাপ হলো একটি ফ্রি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক।
• বুটস্ট্রাপ হলো টাইপোগ্রাফি, ফরম, বাটন, টেবিল, নেভিগেশন, মোডাল, ইমেজ ক্যারোসেল এবং জাভাস্ক্রিপ্ট প্লাগ-ইন সমৃদ্ধ এইচটিএমএল এবং সিএসএস ভিত্তিক টেমপ্লেট ডিজাইন।
• খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য বুটস্ট্রাপ ব্যবহার করা হয়।

রেসপন্সিভ ওয়েব ডিজাইন কি?

রেসপন্সিভ ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই এডজাস্ট করে নিতে পারে।

বুটস্ট্রাপের ইতিহাস

বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলোপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি পায়।

২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্টে হিসেবে বিবেচিত হয়!

বুটস্ট্রাপ কেনো ব্যবহার করবেন?

বুটস্ট্রাপ এর সুবিধাঃ

• সহজ ব্যবহারঃ যেকেউ এইচটিএমএল এবং সিএসএস জানলে বুটস্ট্রাপ ব্যবহার শুরু করতে পারবেন।
• রেসপন্সিভ ফিচারঃ বুটস্ট্রাপের রেসপন্সিভ সিএসএস ফোন, ট্যাবলেট এবং ডেস্কটপে সহজেই এডজাস্ট করে।
• মোবাইল-ফার্স্ট প্রায়োরিটিঃ বুটস্ট্রাপ(৩) এ, মোবাইল-ফার্স্ট স্টাইল কোর ফ্রেমওয়ার্ক এর একটি অংশ।
• ব্রাউজার সাপোর্টঃ বুটস্ট্রাপ প্রায় সকল আধুনিক ব্রাউজারেই সাপোর্ট করে।(chrome, Firefox, Internet Explorer, Safari, এবং Opera)

বুটস্ট্রাপ কোথায় পাবেন?

আপনার ওয়েব সাইটে বুটস্ট্রাপ ব্যবহার করার জন্য দুইটি পদ্ধতি আছে।

যেভাবে পাবেনঃ

• getbootstrap.com থেকে ডাউনলোড করে
• সিডিএন(CDN) থেকে বুটস্ট্রাপ যুক্ত করে

বুটস্ট্রাপ ডাউনলোড

যদি আপনি নিজের বুটস্ট্রাপ ডাউনলোড এবং হোস্ট করতে চান তাহলে getbootstrap.com, এ যান এবং পদ্ধতিগুলো অনুসরন করুন।

বুটস্ট্রাপ সিডিএন

যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (CDN = Content Delivery Network)।

MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে। এগুলোর পাশাপাশি এছাড়াও আপনাকে অবশ্যই জেকুয়েরি লাইব্রেরি যুক্ত করতে হবেঃ

kt_satt_skill_example_id=761

বুটস্ট্রাপ দিয়ে প্রথম ওয়েব পেজ তৈরি করুন

১। এইচটিএমএল(৫) DOCTYPE যুক্ত করুন।

বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপার্টি ব্যবহৃত হয়, যার জন্য এইচটিএমএল(৫) DOCTYPE নির্ধারন করা বাধ্যতামূলক।

সবসময়ই পেজের শুরুতেই এইচটিএমএল(৫) DOCTYPE যুক্ত করুনঃ

kt_satt_skill_example_id=763

২। বুটস্ট্রাপ(৩) মোবাইল-ফার্স্ট

বুটস্ট্রাপ(৩) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ।

যথাযথ আউটপুট এবং টাচ জুমিং এর জন্য এলিমেন্টের মধ্যে ট্যাগ নিশ্চিত করুনঃ

kt_satt_skill_example_id=764

ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)।

পেইজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1 ব্যবহার করা হয়েছে।

৩। কন্টেইনার

বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়।

বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। আপনার প্রয়োজন অনুযায়ী কন্টেইনার বাচাই করে নিনঃ

• রেসপন্সিভ ফিক্সড প্রস্থের কন্টেইনার তৈরি করার জন্য .container ক্লাস ব্যবহার করুন।
• ভিউপোর্টের সম্পূর্ণ প্রস্থ মেপে পূর্ণ প্রস্থের কন্টেইনার করার জন্য .container-fluid ক্লাস ব্যবহার করুন।

নোটঃ কন্টেইনারগুলো নেস্টেবল নয় (আপনি চাইলেই কন্টেইনারের মধ্যে কন্টেইনার রাখতে পারবেন না)।

দুটি বেসিক বুটস্ট্রাপ পেজ

নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (ফিক্সড প্রস্থের কন্টেইনার সহ)

kt_satt_skill_example_id=765

নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (পূর্ণ প্রস্থের কন্টেইনার সহ)

kt_satt_skill_example_id=766

বুটস্ট্রাপ রেফারেন্স

স্যাট একাডেমীতে বুটস্ট্রাপ সিএসএস ক্লাস, কম্পোনেন্ট এবং জাভাস্ক্রিপ্ট প্লাগ-ইনের সম্পূর্ণ রেফারেন্স রয়েছে। এছাড়াও প্রত্যেক অধ্যায়কেই "নিজে চেষ্টা করি " উদাহরণ দিয়ে সাজানো হয়েছে:

• বুটস্ট্রাপ সিএসএস বেসিক টেক্সট
• বুটস্ট্রাপ সিএসএস বাটন
• বুটস্ট্রাপ সিএসএস ফরম
• বুটস্ট্রাপ সিএসএস ইমেজ
• বুটস্ট্রাপ সিএসএস টেবিল
• বুটস্ট্রাপ গ্লিফ কম্পোনেন্ট
• বুটস্ট্রাপ ড্রপডাউন কম্পোনেন্ট
• বুটস্ট্রাপ ন্য্যাভ কম্পোনেন্ট
• বুটস্ট্রাপ জেএস এফিক্স
• বুটস্ট্রাপ জেএস এলার্ট
• বুটস্ট্রাপ জেএস বাটন
• বুটস্ট্রাপ জেএস ক্যারোসেল
• বুটস্ট্রাপ জেএস কলাপ্স
• বুটস্ট্রাপ জেএস ড্রপডাউন
• বুটস্ট্রাপ জেএস মোডাল
• বুটস্ট্রাপ জেএস পপওভার
• বুটস্ট্রাপ জেএস স্ক্রলস্পাই
• বুটস্ট্রাপ জেএস ট্যাব
• বুটস্ট্রাপ জেএস টুলটিপ

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ গ্রীড সিস্টেমের মাধ্যমে ওয়েবপেজকে ১২ কলামে ভাগ করা যায়।

আপনি যদি ১২ কলামের মধ্যে সবগুলো কলাম একত্রে ব্যবহার করতে না চান, তাহলে আপনি কলামগুলোর বিভিন্ন গ্রুপ তৈরি করে অধিক প্রস্থের কলাম তৈরি করতে পারবেনঃ

বুটস্ট্রাপের গ্রীড সিস্টেম সম্পূর্ণ রেসপন্সিভ এবং স্ক্রিনের আকারের উপর নির্ভর করে কলামগুলো বিন্যাসিত হয়।

বুটস্ট্রাপ গ্রীড ক্লাস

বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছেঃ

1. xs (মোবাইলের জন্য)
2. sm ( ট্যাবলেটের জন্য)
3. md (ল্যাপটপের জন্য)
4. lg (বড় ডেস্কটপের জন্য)

অধিক ডায়নামিক এবং ফ্লেক্সিবল লে-আউট তৈরি করার জন্য উপরের ক্লাস গুলো একত্রে বিভিন্ন কম্বিনেশনে ব্যবহার করা যায়।

বুটস্ট্রাপ গ্রীডের সিস্টেমের বেসিক গঠন

নিচে বুটস্ট্রাপ গ্রীডের বেসিক গঠন দেখানো হলোঃ

kt_satt_skill_example_id=767

প্রথমত; আপনি যে লে-আউট অর্জন করতে চান সেটি তৈরি পাওয়ার জন্য একটি কন্টেইনার তৈরি করুন ( < div class="container">)। তারপর, একটি সারি তৈরি করুন (< div class="row">) এবং প্রয়োজনমতো কলামের সংখ্যা যুক্ত করুন। ( .col-*-* ক্লাসের সাহায্যে)। মনে রাখবেন প্রতি সারিতে সর্বোচ্চ ১২টি কলাম যুক্ত করা যায়।

নিচে বুটস্ট্রাপ বেসিক গ্রীড লে-আউটের কিছু উদাহরণ দেয়া হলো।

সমান প্রস্থ বিশিষ্ট তিনটি কলাম

নিম্নলিখিত উদাহরনে সমান প্রস্থের তিনটি কলাম তৈরি করা হলো যা ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপে সমান তিন ভাগে ভাগ হবে কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটির পর একটি নিচে নিচে অবস্থান করবেঃ

kt_satt_skill_example_id=769

দুইটি অসমান কলাম

নিম্নলিখিত উদাহরনে কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম ট্যাবলেট থেকে শুরু করে বড় ডেস্কটপের জন্য তৈরি করা যায় তা দেখানো হলোঃ

kt_satt_skill_example_id=770